import React from 'react'
import './index.css'
import todosStore from '../../../store/todosStore'
import { observer } from 'mobx-react'

function Footer() {
  // 不要解构store中的方法 =》 会导致方法中的this是undefined
  const {todos, completeSize} = todosStore

  // 是否全部完成
  const isAllComplete = todos.length>0 && todos.length===completeSize

  const clickClear = () => {
    if (window.confirm('确定清除吗?')) {
      todosStore.clearCompleteTodos()
    }
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={isAllComplete} onChange={(e) => todosStore.selectAllTodos(e.target.checked)}/>
      </label>
      <span>
        <span>已完成{completeSize}</span> / 全部{todos.length}
      </span>
      {completeSize>0 && <button className="btn btn-danger" onClick={clickClear}>清除已完成任务</button>}
    </div>
  )
}

export default observer(Footer)
